<template>
	<view class="zh-user-center">
		<view class="header">
			<view class="setting" @click.stop="navigateTo('/pages/userCenter/setting/index')">
				<image src="@/static/icons/setting_icon.png" class="setting-icon"/>
			</view>
			<view class="content display-flex align-center">
				<image :src="user.avatar?util.previewImg(user.avatar):'/static/icons/userCenter/avatar.png'" class="avatar-img" @click="navigateTo('/pages/userCenter/user/index')"/>
				<view class="ml-30 flex">
					<view @click="navigateTo('/pages/userCenter/user/index')">
						<text class="font-bold font-40">{{ user.nickName}}</text>
					</view>
					<view class="display-flex justify-between align-center mt-40" 
						@click.stop="navigateTo((isItCertified === IsItCertified.noSubmit || isItCertified === IsItCertified.noBind)?'/pages/auth/certify':'/pages/auth/certifyDetail')">
						<view class="display-flex align-center" v-if="isItCertified === IsItCertified.agree">
							<text class="font-24">{{ user.shopName }}</text>
							<image src="@/static/icons/userCenter/certification_icon.png" class="certification-icon"/>
						</view>
						<view class="display-flex align-center" 
							v-if="isItCertified === IsItCertified.reject 
							|| isItCertified === IsItCertified.noSubmit 
							|| isItCertified === IsItCertified.waitAudit
							|| isItCertified === IsItCertified.noBind">
							<image src="@/static/icons/certify_icon.png" class="certify-icon"/>
							<text class="font-24 font-FFFFFF ml-10">通过企业认证, 开启VIP服务</text>
							<view v-if="isItCertified === IsItCertified.waitAudit">
								<text class="certify-btn">等待审批</text>
							</view>
							<view v-if="isItCertified === IsItCertified.reject">
								<text class="font-24 font-bold ml-30 text-decoration font-EC1010">已驳回</text>
							</view>
							<view v-if="isItCertified === IsItCertified.noSubmit || isItCertified === IsItCertified.noBind">
								<text class="certify-btn">立即认证</text>
							</view>
							
						</view>
						<image src="@/static/icons/right_arrow_white.png" class="right-arrow"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="title display-flex justify-between">
				<text class="font-30 font-bold">买家中心</text>
				<view class="display-flex align-center" @click="certifyTo('/pages/order/purchase/index')">
					<text class="font-24 font-999">全部订单</text>
					<image src="@/static/icons/right_arrow_light.png" class="right-arrow"></image>
				</view>
			</view>
			<view class="content display-flex align-end">
				<view class="item" @click="certifyTo('/pages/order/purchase/index?status=' + OrderStatus.waitSure)">
					<image src="@/static/icons/userCenter/wait_sure_icon.png" class="wait-sure-icon"/>
					<text class="font-999 font-24 display-block mt-20">待确认</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.saleConfirm) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.saleConfirm"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/purchase/index?status=' + OrderStatus.assert)">
					<image src="@/static/icons/userCenter/wait_pay_icon.png" class="wait-pay-icon"/>
					<text class="font-999 font-24 display-block mt-20">待付款</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.salePayment) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.salePayment"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/purchase/index?status=' + OrderStatus.paid)">
					<image src="@/static/icons/userCenter/wait_make_icon.png" class="wait-make-icon"/>
					<text class="font-999 font-24 display-block mt-20">待收款</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.saleCollection) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.saleCollection"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/purchase/index?status=' + OrderStatus.done)">
					<image src="@/static/icons/userCenter/pay_success_icon.png" class="pay-success-icon"/>
					<text class="font-999 font-24 display-block mt-20">交易完成</text>
				</view>
			</view>
		</view>
		<view class="section mt-20">
			<view class="title display-flex justify-between">
				<text class="font-30 font-bold">卖家中心</text>
				<view class="display-flex align-center" @click="certifyTo('/pages/order/sale/index')">
					<text class="font-24 font-999">全部订单</text>
					<image src="@/static/icons/right_arrow_light.png" class="right-arrow"></image>
				</view>
			</view>
			<view class="content display-flex align-end flex-wrap">
				<view class="item" @click="certifyTo('/pages/order/sale/index?status=' + OrderStatus.waitSure)">
					<image src="@/static/icons/userCenter/wait_sure_icon.png" class="wait-sure-icon"/>
					<text class="font-999 font-24 display-block mt-20">待确认</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.purchaseConfirm) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.purchaseConfirm"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/sale/index?status=' + OrderStatus.assert)">
					<image src="@/static/icons/userCenter/wait_pay_icon.png" class="wait-pay-icon"/>
					<text class="font-999 font-24 display-block mt-20">待付款</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.purchasePayment) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.purchasePayment"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/sale/index?status=' + OrderStatus.paid)">
					<image src="@/static/icons/userCenter/wait_make_icon.png" class="wait-make-icon"/>
					<text class="font-999 font-24 display-block mt-20">待收款</text>
					<view class="mark-position" v-if="Number(orderSummaryData.detail.purchaseCollection) > 0">
						<u-mark type="plain" size="36" color="#EC1010" maxValue="9" :fontSize="28" :value="orderSummaryData.detail.purchaseCollection"></u-mark>
					</view>
				</view>
				<view class="item" @click="certifyTo('/pages/order/sale/index?status=' + OrderStatus.done)">
					<image src="@/static/icons/userCenter/pay_success_icon.png" class="pay-success-icon"/>
					<text class="font-999 font-24 display-block mt-20">交易完成</text>
				</view>
				<view class="item" @click="certifyTo('/pages/storage/goods/index')">
					<image src="@/static/icons/userCenter/goods_icon.png" class="goods-icon"/>
					<text class="font-999 font-26 display-block mt-20">商城货物</text>
				</view>
			</view>
		</view>
		<view class="section mt-20">
			<view class="title font-30 font-bold">我的云仓</view>
			<view class="content display-flex align-end">
				<view class="item" @click="certifyTo('/pages/storage/stock/index')">
					<image src="@/static/icons/userCenter/storage_icon.png" class="storage-icon"/>
					<text class="font-999 font-24 display-block mt-20">云仓库存</text>
				</view>
				<view class="item" @click="certifyTo('/pages/storage/warehouseIn/index')">
					<image src="@/static/icons/userCenter/warehouse_in_icon.png" class="warehouse-in-icon"/>
					<text class="font-999 font-24 display-block mt-20">我的进仓</text>
				</view>
				<view class="item" @click="certifyTo('/pages/storage/warehouseOut/index')">
					<image src="@/static/icons/userCenter/warehouse_out_icon.png" class="warehouse-out-icon"/>
					<text class="font-999 font-24 display-block mt-20">我的出仓</text>
				</view>
			</view>
		</view>
		<!-- <view class="section2 display-flex justify-between align-center">
			<view class="item flex">
				<image src="@/static/icons/userCenter/supplier_purchase_icon.png" class="supplier-purchase-icon"/>
				<text class="mt-15 font-999 font-24 display-block mt-20">供应商代采</text>
			</view>
			<view class="item flex">
				<image src="@/static/icons/userCenter/supplier_sale_icon.png" class="supplier-sale-icon"/>
				<text class="mt-15 font-999 font-24 display-block mt-20">供应商代销</text>
			</view>
		</view> -->
		<view class="section mt-20">
			<view class="title font-30 font-bold">功能服务</view>
			<view class="content display-flex align-end">
				<view class="item"  @click="certifyTo('/pages/userCenter/subAccount/index')">
					<image src="@/static/icons/userCenter/sub_account_icon.png" class="sub-account-icon"/>
					<text class="font-999 font-24 display-block mt-20">子账号管理</text>
				</view>
				<view class="item" @click="certifyTo('/pages/userCenter/address/index')">
					<image src="@/static/icons/userCenter/address_icon.png" class="address-icon"/>
					<text class="font-999 font-24 display-block mt-20">我的地址</text>
				</view>
				<view class="item" @click="certifyTo('/pages/userCenter/invoice/index')">
					<image src="@/static/icons/userCenter/invoice_icon.png" class="invoice-icon"/>
					<text class="font-999 font-24 display-block mt-20">发票抬头</text>
				</view>
			</view>
		</view>
		<view class="service" >
			<view class="service-box" @click="openServiceLink">
				<image src="@/static/icons/userCenter/service_icon.png" class="service-icon"/>
				<text class="font-24 black mt-10 display-block">客服热线</text>
			</view>
		</view>
		<service-link :show="showServiceLink" @close="changeServiceLink" @link="linkService" @save="saveService"></service-link>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { util, nav, tip, system } from '@/utils'
	import { useAuthStore } from '@/store/auth'
	import { IsItCertified } from '@/enum/user'
	import { onHide, onLoad, onShow } from '@dcloudio/uni-app';
	import { OrderStatus } from '@/enum/order'
	import { order } from '@/api'
	import serviceLink from '@/pages/components/service-link'
	
	const authStore = useAuthStore()
	const showServiceLink = ref(false)
	let user:any = reactive({})	
	let isItCertified = ref('')
	
	const orderSummaryData:any = reactive({
		detail:{
			purchaseCollection: '0',
			purchaseConfirm: '0',
			purchasePayment: '0',
			saleCollection: '0',
			saleConfirm: '0',
			salePayment: '0',
		}
	})
	
	onShow(() => {
		if(!nav.isLogin()) {
			uni.reLaunch({
				url:'/pages/auth/login'
			})
			system.setTabBarBadge({
			  index: 2,
			  text: '0'
			})
		} else {
			authStore.setUserInfo().then((res:any) => {
				user = res.user
				isItCertified.value = res.isItCertified
			})
			orderSumList()
		}
	})
	
	onHide(() => {
		showServiceLink.value = false
	})
	
	const orderSumList = () => {
		order.getOrderSummary({}).then((res:any) => {
			const data = res.data
			orderSummaryData.detail = {
				purchaseCollection: data.purchaseCollection.toString() || '0',
				purchaseConfirm: data.purchaseConfirm.toString() || '0',
				purchasePayment: data.purchasePayment.toString() || '0',
				saleCollection: data.saleCollection.toString() || '0',
				saleConfirm: data.saleConfirm.toString() || '0',
				salePayment:  data.salePayment.toString() || '0',
			}
		})
	}
	
	const openServiceLink = () => {
		changeServiceLink()
	}
	
	const changeServiceLink = () => {
		showServiceLink.value = !showServiceLink.value
	}
	
	const linkService = () => {
		uni.makePhoneCall({
			phoneNumber:"0757-82138330",
			success:() => {
				console.log('拨打电话成功')
			},
			fail:() => {
				
			}
		})
	}
	
	const saveService = () => {
		tip.showToast('已保存，请用微信扫码加好友')
	}
	
	const certifyTo = (url:string) => {
		nav.navigateTo(url)
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({
			url:url
		})
	}
</script>

<style lang="scss" scoped>
	.zh-user-center {
		padding-bottom:170rpx;
		.header {
			width:100%;
			height:330rpx;
			background: linear-gradient(90deg, #1769FF, #3795FF);
			color:#fff;
			display:block;
			position:relative;
			.setting {
				position:absolute;
				top:0rpx;
				right:0rpx;
				width:100rpx;
				height:88rpx;
				image {
					width:43rpx;
					height: 38rpx;
					float:right;
					margin-top:50rpx;
					margin-right:30rpx;
				}
			}
			.content {
				padding: 110rpx 30rpx 0;
				.avatar-img {
					width: 130rpx;
					height:130rpx;
					border:6rpx solid #fff;
					border-radius: 72rpx;
				}
				.certification-icon {
					width: 114rpx;
					height: 38rpx;
					margin-left: 10rpx;
				}
				.right-arrow {
					width: 12rpx;
					height: 22rpx;
					display: inline-block;
				}
				.certify-icon {
					width: 23rpx;
					height:25rpx;
				}
				.certify-btn {
					text-decoration:underline;
					background:linear-gradient(to right, #22DA6C, #B7FE20);
					-webkit-background-clip: text;
					color: transparent;
					display:inline-block;
					font-size:24rpx;
					margin-left:30rpx;
					font-weight:bold;
					position:relative;
					::after {
						content:'';
						position:absolute;
						bottom:0rpx;
						left:0rpx;
						right:0rpx;
						height:3rpx;
						width:100%;
						background:linear-gradient(to right, #22DA6C, #B7FE20);
					}
				}
			}
		}
		.section {
			padding:30rpx;
			background-color: $uni-bg-card-color;
			.title {
				border-bottom:1rpx dashed $uni-border-color;
				padding-bottom:30rpx;
				.right-arrow {
					width: 12rpx;
					height: 22rpx;
					margin-left: 13rpx;
				}
			}
			.content {
				.item {
					width: 170rpx;
					text-align: center;
					font-weight:400;
					display:inline-block;
					margin:30rpx 0 10rpx;
					position:relative;
					.mark-position {
						position:absolute;
						right:50rpx;
						top:-20rpx;
					}
					.wait-sure-icon {
						width: 49rpx;
						height: 46rpx;
					}
					.wait-pay-icon {
						width: 48rpx;
						height: 46rpx;
					}
					.wait-make-icon {
						width: 49rpx;
						height: 46rpx;
					}
					.pay-success-icon {
						width: 44rpx;
						height: 44rpx;
					}
					.goods-icon {
						width: 42rpx;
						height: 46rpx;
					}
					.storage-icon {
						width: 57rpx;
						height: 44rpx;
					}
					.warehouse-in-icon {
						width: 48rpx;
						height: 44rpx;
					}
					.warehouse-out-icon {
						width: 48rpx;
						height: 44rpx;
					}
					.sub-account-icon {
						width: 43rpx;
						height: 43rpx;
					}
					.address-icon {
						width:46rpx;
						height: 45rpx;
					}
					.invoice-icon {
						width: 50rpx;
						height: 36rpx;
					}
				}
			}
		}
		.section2 {
			padding:30rpx;
			.item {
				width:170rpx;
				text-align: center;
				font-weight:400;
				background-color: $uni-bg-card-color;
				padding:30rpx 0;
				border-radius: 10px;
				.supplier-purchase-icon {
					width: 62rpx;
					height: 60rpx;
				}
				.supplier-sale-icon {
					width: 51rpx;
					height: 59rpx;
				}
			}
		}
		.service {
			text-align: center;
			margin-top: 52rpx;
				
			.service-box {
				width:160rpx;
				height:160rpx;
				text-align:center;
				display:inline-block;
				.service-icon {
					width:73rpx;
					height: 73rpx;
				}
			}
			
		}
	}
</style>
